<template>
  <div class="common-table-item">
    <div class="table-item">
    <formItem title="用户名:">
      <template v-slot:right>
        <span class="span12121">{{personalUser.name}}</span>
      </template>
    </formItem>
    <formItem title="真实姓名:">
      <template v-slot:right>
        <span class="span">{{personalUser.trueName}}</span>
      </template>
    </formItem>
    <formItem title="所属部门:">
      <template v-slot:right>
        <span class="span">{{personalUser.userUnit}}</span>
      </template>
    </formItem>
  </div>
    <div class="table-item">
      <formItem title="所属区镇:">
        <template v-slot:right>
          <span class="span">{{personalUser.userXzq}}</span>
        </template>
      </formItem>
      <formItem title="用户权限:">
        <template v-slot:right>
          <span class="span">{{personalUser.userType}}</span>
        </template>
      </formItem>
      <formItem title="用户类型:">
        <template v-slot:right>
          <span class="span">{{personalUser.toolType}}</span>
        </template>
      </formItem>
    </div>
    <div class="bottom">
      <div class="footer-btn">
        <el-button type="primary" @click="handleEdit">修改密码</el-button>
        <el-button type="success" @click="handleExit">返回</el-button>
      </div>
    </div>
  </div>
  <div>
    <el-dialog v-model="personFormVisible" custom-class="detail-progress-modal" :modal="false"
               :draggable="true" title="修改密码表" @close="closeModal">
      <div class="table-item-user">
        <formItem title="用户名">
          <template v-slot:right>
            <el-input
                v-model="personalUser.name"
                placeholder="请输入用户名"
                type="text"
            />
          </template>
        </formItem>
        <formItem title="新密码">
          <template v-slot:right>
            <el-input
                v-model="personalUser.passWordOne"
                placeholder="请输入新密码"
                type="password"
            />
          </template>
        </formItem>
        <formItem title="确认密码">
          <template v-slot:right>
            <el-input
                v-model="personalUser.passWordTwo"
                placeholder="请输入确认密码"
                type="password"
            />
          </template>
        </formItem>
      </div>
      <template #footer>
        <div class="marcker-footer">
          <div class="footer-btn">
            <el-button type="primary" @click="closeModal">取消</el-button>
            <el-button type="success" @click="confirmModal">确定</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {defineComponent, onMounted, reactive, ref, getCurrentInstance} from "vue";
import {useRoute, useRouter} from "vue-router";
import formItem from "@/components/commonFomItem/index.vue";
import {ElNotification} from "element-plus";
import Data from "../../../../../public/config/data.json";

export default defineComponent({
  name: "index",
  components: {formItem},
  setup() {
    const {appContext} = getCurrentInstance();
    const personalUser = reactive({
      name: '',
      trueName: '',
      userUnit: '',
      userXzq: '',
      userType: '',
      toolType: '',
      passWord:'',
      passWordOne:'',
      passWordTwo:''
    });
    const loginName = localStorage.getItem("loginName")
    const passWord = localStorage.getItem("passWord")
    const router = useRouter();
    //用户权限
    const useType = reactive(Data).useType
    //用户端
    const toolType = reactive(Data).toolType
    const reload = ()=>{
      appContext.config.globalProperties.axios({
        url: `api/finduser?username=${loginName}&userpassword=${passWord}`,
        method: 'get',
      }).then((response) => {
        response.data.forEach(item => {
          personalUser.name = loginName
          personalUser.trueName = item.usertruename
          personalUser.id = item.userid
          personalUser.userUnit = item.userunit
          personalUser.userType = useType[item.usertype].value
          personalUser.usertype = item.usertype
          personalUser.userXzq = item.userxzq
          personalUser.toolType = toolType[item.tooltype].value
          personalUser.tooltype = item.tooltype
          personalUser.passWord = passWord
        })
      })
    }
    const personFormVisible = ref(false)
    const closeModal = () => {
      personFormVisible.value = false
    }
    const confirmModal = () => {
      if(personalUser.passWordOne === personalUser.passWordTwo){
        personalUser.passWord = personalUser.passWordOne
        appContext.config.globalProperties.axios({
          url: `api/update/user`,
          method: 'post',
          transformRequest: [function () {
            let oMyForm = new FormData();
            oMyForm.append("name", personalUser.name);
            oMyForm.append("passWord", personalUser.passWord);
            oMyForm.append("id", personalUser.id);
            oMyForm.append("trueName", personalUser.trueName);
            oMyForm.append("unit", personalUser.userUnit);
            oMyForm.append("location", personalUser.userXzq);
            oMyForm.append("userType", personalUser.usertype);
            oMyForm.append("toolType", personalUser.tooltype);
            return oMyForm;
          }],
        }).then(() => {
          ElNotification({
            title: "修改用户数据",
            message: "修改用户数据成功",
            type: "success",
            position: "top-left",
            offset: 300,
          });
          localStorage.setItem("passWord",personalUser.passWord)
          personFormVisible.value = false
        })
      }
      else
      {
        ElNotification({
          title: "修改用户数据",
          message: "密码前后不一致",
          type: "warning",
          position: "top-left",
          offset: 300,
        });
      }
    }
    const handleExit = () => {
      router.push({
        name: "landpoint",
      })
    }
    const handleEdit = () => {
      personFormVisible.value = true
    }
    onMounted(() => {
      if (!sessionStorage.getItem('loginName') || !localStorage.getItem('loginName')) {
        localStorage.clear()
        router.push({
          name: "landpointtc",
        })
      }
     reload()
    })
    return {
      router,
      personalUser,
      handleExit,
      handleEdit,
      closeModal,
      personFormVisible,
      confirmModal,
      useType,
      toolType,
      loginName,
      passWord
    }
  }
})
</script>

<style lang="scss">
.common-table-item{

  margin-top: 10%;
  display: flex;
  align-items: center;
  flex-direction: column;

  .table-item{
    margin-left: 8%;
  }
  .left[data-v-6ebbf9d6]{
    color: black;
  }
  .right[data-v-6ebbf9d6]{
    width: 11.04167vw;
    height: 2.08333vw;
    margin-top: 15px;
    margin-left: 15px;
    color: black;
  }



}

.table-item-user{
  display: flex;
  align-items: center;
  flex-direction: column;
  .el-input__wrapper {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(245, 248, 255, 0.25);
  }
}

</style>
